<nz-card>
  <nz-breadcrumb style="margin:16px 0;">
    <nz-breadcrumb-item>控制面板</nz-breadcrumb-item>
    <nz-breadcrumb-item>分析页</nz-breadcrumb-item>
  </nz-breadcrumb>
  <div class="components-table-demo-control-bar">
    <form nz-form nzLayout="inline">
      <nz-form-item>
        <nz-form-label><label>Bordered</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="bordered" name="bordered"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Loading</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="loading" name="loading"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Pagination</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="pagination" name="pagination"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>PageSizeChanger</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="sizeChanger" name="sizeChanger"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Title</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="title" name="title"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Column Header</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="header" name="header"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Footer</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="footer" name="footer"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Expandable</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="expandable" name="expandable"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Checkbox</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="checkbox" name="checkbox"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Fixed Header</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="fixHeader" name="fixHeader"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>No Result</label></nz-form-label>
        <nz-form-control>
          <nz-switch (ngModelChange)="noResultChange($event)" [(ngModel)]="noResult" name="noResult"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Simple Pagination</label></nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="simple" name="simple"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Size</label></nz-form-label>
        <nz-form-control>
          <nz-radio-group [(ngModel)]="size" name="size">
            <label nz-radio-button nzValue="default">Default</label>
            <label nz-radio-button nzValue="middle">Middle</label>
            <label nz-radio-button nzValue="small">Small</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label><label>Pagination Position</label></nz-form-label>
        <nz-form-control>
          <nz-radio-group [(ngModel)]="position" name="position">
            <label nz-radio-button nzValue="top">Top</label>
            <label nz-radio-button nzValue="bottom">Bottom</label>
            <label nz-radio-button nzValue="both">Both</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <nz-table #dynamicTable
            (nzCurrentPageDataChange)="currentPageDataChange($event)"
            [nzBordered]="bordered"
            [nzData]="listOfData"
            [nzFooter]="footer?'Here is Footer':null"
            [nzFrontPagination]="pagination"
            [nzLoading]="loading"
            [nzPaginationPosition]="position"
            [nzScroll]="fixHeader ? { y: '240px' } : null"
            [nzShowPagination]="pagination"
            [nzShowSizeChanger]="sizeChanger"
            [nzSimple]="simple"
            [nzSize]="size"
            [nzTitle]="title?'Here is Title':null">
    <thead>
    <tr *ngIf="header">
      <th *ngIf="expandable" nzShowExpand nzWidth="50px"></th>
      <th (nzCheckedChange)="checkAll($event)" *ngIf="checkbox" [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" nzShowCheckbox
          nzWidth="62px"></th>
      <th nzWidth="150px">Name</th>
      <th nzWidth="70px">Age</th>
      <th>Address</th>
      <th nzWidth="260px">Action</th>
    </tr>
    </thead>
    <tbody>
    <ng-template [ngForOf]="dynamicTable.data" let-data ngFor>
      <tr>
        <td *ngIf="expandable" [(nzExpand)]="data.expand" nzShowExpand></td>
        <td (nzCheckedChange)="refreshStatus()" *ngIf="checkbox" [(nzChecked)]="data.checked" nzShowCheckbox></td>
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
        <td>{{data.address}}</td>
        <td>
          <a href="#">Action 一 {{data.name}}</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a href="#">Delete</a>
        </td>
      </tr>
      <tr [nzExpand]="data.expand&&expandable">
        <td></td>
        <td [attr.colspan]="checkbox?5:4">{{data.description}}</td>
      </tr>
    </ng-template>
    </tbody>
  </nz-table>
</nz-card>
